<template>
  <a-modal
    title="患者分组"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-form-model-item label="分组名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="groupName">
        <a-input placeholder="请输入分组名称" v-model="model.groupName" :maxLength="10" />
      </a-form-model-item>
    </a-form-model>

  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import { USER_INFO } from "@/store/mutation-types"
  import { getAction, postAction, deleteAction } from '@/api/manage'

  export default {
    name: 'GroupModal',
    data() {
      return {
        title: '操作',
        visible: false,
        confirmLoading: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        validatorRules: {
          groupName: [{required: true, message: '请输入分组名称!'}],
        },
      }
    },
    created() {
    },
    methods: {
      ...mapGetters(['doctorId']),
      add() {
        this.edit({
          orgCode: Vue.ls.get(USER_INFO).orgCode
        })
      },
      edit(record) {
        this.visible = true
        this.model = Object.assign({doctorId: this.doctorId()}, record)
      },
      handleSubmit() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            that.confirmLoading = true

            postAction('group/saveorupdate', this.model).then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                that.$emit('ok');
              } else {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.handleCancel();
            })
          } else {
            return false
          }
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.visible = false
        this.$refs.form.resetFields();
      }
    }
  }
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>